<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>汉服知识交流网站</title>
	</head>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<body >
		<!--用导航条写一个头部-->
		<head>
			<div class="navbar navbar-default container" id="header" style="z-index: 2;background-color: white;border: none;">
				<div class="navbar-header">
					<a class="navbar-brand" href="">着华夏之裳，兴礼仪之邦</a>
					<button class="navbar-toggle" data-toggle="collapse" data-target="#shownav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
				</div>
				<ul id="shownav" class="nav navbar-nav collapse navbar-collapse navbar-right">
					<li>
						<a href="/index"> <span class="glyphicon glyphicon-home"></span>首页</a>
					</li>
					<li>
						<a href="/lishi"><span class="glyphicon glyphicon-chevron-right"></span>历史</a>
					</li>
					<li>
						<a href="/xingzhi"><span class="glyphicon glyphicon-heart-empty"style="padding-right: 5px;"></span>形制</a>
					</li>
					<li>
						<a href="/zhoubian"><span class="glyphicon glyphicon-hand-right" style="padding-right: 5px;"></span>更多展示</a>
					</li>
				</ul>
			</div></head>
   <!--三张图片的一个轮播效果呀-->
   <body>
   	
  
	<div class="container" style="margin-top: -19px;"> 
	<div id="myCarousel" class="carousel slide">
	<ol class="carousel-indicators">
	<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
	<li data-target="#myCarousel" data-slide-to="1"></li>
	<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
	<div class="item active">
	<img src="img/A1.jpg" width="1200" height="1000" class="active" data-toggle="tooltip" alt="第一张" title="图片一啊">
	<div class="carousel-caption">
      </div>
	</div>
	
	<div class="item">
	<img src="img/A2.jpg" width="1200" height="1000" class="" alt="第二张">	
	<div class="carousel-caption">
      </div>
	</div>
	
	<div class="item">
	<img src="img/A3.jpg"width="1200" height="1000"  class="" alt="第三张">
	<div class="carousel-caption">
      </div>
	</div>
	</div>
	<a href="#myCarousel" data-slide="prev" class="carousel-control left"><span class="glyphicon glyphicon-chevron-left"></span>	</a>
	<a href="#myCarousel" data-slide="next" class="carousel-control right"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
	</div>
	<!--就是一些文字，用了文字居中而已-->
	<div class="container">
		<p class="h2 text-center">汉服是什么</p>
		<p class="h4 text-center">汉服，全称是“汉民族传统服饰”，又称汉衣冠、汉装、华服</p>
		<hr />
	</div>
	<!--用汉服分组，然后还用了栅格，预计应该可以点击加跳转，拿jQuery写-->
	<div class="container">
    <div class="row centered">
      </div>
      		<!--<div class="media-bottom"></div>-->
      
      <body>
      	<p></p>
      	<div class="container">
      		<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
      			<div class="col-lg-11 col-md-8 col-sm-11 col-xs-12">
      				 <div class="thumbnail col-lg-12"> 
      					<div class="col-lg-3">
      						<img src="img/lishi/B1.jpg" class="img-responsive center-block" />
      					</div>
      					<div class="col-lg-9" style="text-align: center;" >
      						<h4 class="media-heading"  style="padding-top: 20px;overflow: hidden;white-space: normal;text-overflow: ellipsis;"><b>汉服起源</b>
      						<p id="text" style="margin-top: 30px;" class="hidden-xs">约五千年前，中国在新石器时代的仰韶文化时期，就产生了原始的农业和纺织业，开始用织成的麻布来做衣服，黄帝的妻子嫘祖发明了饲蚕和丝纺，人们的衣冠服饰日臻完备。殷商以后，冠服制度初步建立，西周时，服饰制度逐渐完善，并形成了以“天子冕服”为中心的章服制度</p>
      					<h4 class="media-heading" style="padding-top: 20px;"><b>汉服发展</b>
      						<p id="text" style="margin-top: 30px;" class="hidden-xs">秦统一中国以后，建立了衣冠制度。汉朝的礼仪制度由汉高祖的太常叔孙通依据夏商周三代礼仪制度所制定。至东汉明帝，参照三代和秦的服饰制度，确立了以冠帽为区分等级主要标志的汉代冠服制度。魏晋南北朝时期的服饰，受到社会政治、经济、思想等方面的影响，由魏晋的仍循秦汉旧制发展到南北朝时期各民族的相互影响、相互吸收、渐趋融合。唐代服饰承上启下，法服和常服同时并行。宋代服饰大体上沿袭了隋唐旧制。</p>
      					</div>
      					<!--<div class="media-bottom"></div>-->

      				</div>
      			</div>
      			 <div class="col-lg-11 col-md-8 col-sm-11 col-xs-12">
      				<div class="thumbnail col-lg-12"> 
      					<div class="col-lg-3">
      						<img src="img/lishi/B2.jpg"  class="img-responsive center-block"/>
      					</div>
      					<div class="col-lg-9" style="text-align: center;" >
      						<h4 class="media-heading" style="padding-top: 20px;"><b>最新活动</b>
      						<p id="text" style="margin-top: 30px;" class="hidden-xs">此处介绍最新活动</p>
							<p>例如灯谜夜、花灯会、孔子游学等</p>
							<p>活动时间：**年**月**日</p>
							<p>活动地址：*************</p>
							<p>联系方式：139********</p>
							
      					</div>
      					<!--<div class="media-bottom"></div>-->
      				</div>
      			</div>
      		</div>
      	</div>
      	<p></p>
      </body>
	<!--底部-->
	<div id="contact" name="contact">
  <div class="container">
    <div class="row">
      <h2 class="centered">留言：</h2>
      <hr>
    </div>
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 centered">
        <p>欢迎交流联系参与活动：</p>
        <form id="contact" method="post" class="form" role="form" action="/index">
          <div class="row">
            <div class="col-xs-6 col-md-6 form-group">
              <input class="form-control" id="name" name="name" placeholder="姓名" type="text" required />
            </div>
            <div class="col-xs-6 col-md-6 form-group">
              <input class="form-control" id="phone" name="phone" placeholder="电话" type="phone" required />
            </div>
          </div>
          <textarea class="form-control" id="message" name="message" placeholder="建议或参与活动" rows="5"></textarea>
          <div class="row">
            <div class="col-xs-12 col-md-12">
              <button class="btn btn-success" type="submit" style="margin-bottom: 50px; margin-left: 700px; margin-top: 20px;">留言</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
    
    
    
    
    
    <script src="js/jquery1.11.3.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('#myCarousel').carousel({
			interval:3000,
		})
		$('.item img').tooltip();
	</script>
	</body>
</html>
